import APIS from '@/apis';
import ImageUpload from '@/components/ImageUpload';
import RichTextEditor from '@/components/RichTextEditor';
import VideoUpload from '@/components/VideoUpload';
import {Button, Space, Form, Input, Collapse, message} from 'antd';
import CollapsePanel from 'antd/lib/collapse/CollapsePanel';
import {FormInstance} from 'antd/lib/form';
import React, {Component} from 'react';
import {connect} from 'umi';
import VRLessonDocument from './VRLessonDocument';
import SearchAbleSelect from "@/components/SearchAbleSelect";

const layout = {
  labelCol: {span: 2},
  wrapperCol: {span: 6},
};

class VRCourseEditor extends Component<any, any> {
  formInstance?: FormInstance | null;

  constructor(props: any) {
    super(props);
    this.state = {
      editorData: null,
      expImg: '',
      introduceVideo: '',
      guideVideo: '',
      editorExpGuide: '',
      editorPrinciple: '',
      editorServicePlan: '',
      editorDeviceRequire: '',
      editorExpFeature: '',
      lessonId: '',
      courseId: 0,
      examId: -1
    };
  }

  componentDidMount() {
    var params = new URLSearchParams(this.props.history.location.search);
    var id = null;
    if (params.has('id')) {
      id = params.get('id');
      this.setState({lessonId: id});
      APIS.CourseAPI.GetChapterDetail({id}).then((data) => {
        const detailes = data.lessonDetails
        if (detailes) {
          detailes.score = detailes?.score / 100;

          this.setState({
            editorData: detailes,
            editorExpGuide: detailes.expGuide,
            editorPrinciple: detailes.principle,
            editorServicePlan: detailes.servicePlan,
            editorDeviceRequire: detailes.deviceRequire,
            editorExpFeature: detailes.expFeature,
            expImg: detailes.expImg,
            description: detailes.description,
            guideVideo: detailes.guideVideo,
            introduceVideo: detailes.introduceVideo,
            courseId: detailes.courseId,
            examId: detailes.expExam
          });

          this.formInstance?.setFieldsValue({
            expName: detailes.expName,
            description: detailes.description,
            projUrl: detailes.projUrl,
            ...detailes
          });
          this.serach?.onSearch('');
        }
      }).catch(() => {
        message.error("课程信息不存在或者数据错误！");
        this.props.history.replace("teaching/course/list");
      });
      return;
    }
  }

  form: any;

  /*ilab-x配置*/
  RenderIlabForm() {
    return <div>
      <Form.Item
        {...layout}
        label="Aeskey"
        name="aesKey"
      >
        <Input/>
      </Form.Item>
      <Form.Item
        {...layout}
        label="SecretKey"
        name="secretKey"
      >
        <Input/>
      </Form.Item>
      <Form.Item
        {...layout}
        label="IssueId"
        name="issueId"
      >
        <Input/>
      </Form.Item>
      <Form.Item
        {...layout}
        label="专家账号"
        name="testAccount"
      >
        <Input/>
      </Form.Item>
      <Form.Item
        {...layout}
        label="专家密码"
        name="testPwd"
      >
        <Input.Password/>
      </Form.Item>
    </div>
  }

  serach: SearchAbleSelect = null;

  render() {
    return (
      <Form
        style={{marginTop: '30px'}}
        ref={(ref) => (this.formInstance = ref)}
        onFinish={(values) => {
          if (this.state.editorData?.id) {
            APIS.CourseAPI.UpdateChapterCourseVR({
              id: this.state.editorData.id,
              chapterId: this.state.editorData.chapterId,
              expName: values.expName,
              projUrl: values.projUrl,
              expImg: this.state.expImg,
              introduceVideo: this.state.introduceVideo,
              guideVideo: this.state.guideVideo,
              expGuide: this.state.editorExpGuide,
              principle: this.state.editorPrinciple,
              servicePlan: this.state.editorServicePlan,
              deviceRequire: this.state.editorDeviceRequire,
              expFeature: this.state.editorExpFeature,
              introduction: values.introduction,
              stepCount: values.stepCount,
              duration: values.duration,
              description: this.state.description,
              score: values.score * 100,
              contact: values.contact,
              aesKey: values.aesKey,
              secretKey: values.secretKey,
              issueId: values.issueId,
              testAccount: values.testAccount,
              testPwd: values.testPwd,
              expExam: this.state.examId
            }).then(() => this.props.history.goBack());
          } else {
            APIS.CourseAPI.CreateNewChapterCourseVR({
              chapterId: this.state.lessonId,
              expName: values.expName,
              projUrl: values.projUrl,
              expImg: this.state.expImg,
              introduceVideo: this.state.introduceVideo,
              guideVideo: this.state.guideVideo,
              expGuide: this.state.editorExpGuide,
              principle: this.state.editorPrinciple,
              servicePlan: this.state.editorServicePlan,
              deviceRequire: this.state.editorDeviceRequire,
              expFeature: this.state.editorExpFeature,
              description: this.state.description,
              introduction: values.introduction,
              stepCount: values.stepCount,
              duration: values.duration,
              score: values.score * 100,
              contact: values.contact,
              aesKey: values.aesKey,
              secretKey: values.secretKey,
              issueId: values.issueId,
              testAccount: values.testAccount,
              testPwd: values.testPwd,
              expExam: this.state.examId
            }).then(() => this.props.history.goBack());
          }
        }}
      >
        <Form.Item label="实验id" name="id" style={{width: '500px'}}>
          <Input disabled/>
        </Form.Item>
        <Form.Item label="实验名称" name="expName" style={{width: '500px'}}>
          <Input/>
        </Form.Item>
        <Form.Item label="实验简介" name="introduction" style={{width: '500px'}}>
          <Input placeholder="请输入0-300字的实验简介" maxLength={300}/>
        </Form.Item>
        <Form.Item label="项目链接" name="projUrl" style={{width: '500px'}}>
          <Input/>
        </Form.Item>
        <Form.Item label="项目联系人" name="contact" style={{width: '500px'}}>
          <Input type="tel" maxLength={11}/>
        </Form.Item>
        <Form.Item label="实验学时" name="duration" style={{width: '500px'}}>
          <Input type="number"/>
        </Form.Item>
        <Form.Item label="实验学分" name="score" style={{width: '500px'}}>
          <Input type="number"/>
        </Form.Item>
        <Form.Item label="实验步骤" name="stepCount" style={{width: '500px'}}>
          <Input type="number"/>
        </Form.Item>
        <Form.Item label="考试试卷" name="expExam" style={{width: '500px'}}>
          <SearchAbleSelect
            ref={(ref) => this.serach = ref}
            searchData={async (key) => {
              var datas: any = await APIS.ExamAPI.GetExamList({
                current: 1,
                pageSize: 99,
                courseId: this.state.courseId
              });
              return Promise.resolve(
                datas.data?.map((item) => {
                  return {value: item.id, key: item.title};
                }),
              );
            }}
            name={"exam"}
            placeholder='请选择一个试卷'
            getValue={(value) => {
              this.setState({examId: value.exam});
            }}
            values={this.state.examId}
          />
        </Form.Item>
        <Form.Item>
          预览图:
          <ImageUpload
            preImage={this.state?.expImg}
            handleImageChange={(url: any) => (this.setState({expImg: url}))}
          />
        </Form.Item>
        <Form.Item style={{float: 'left'}}>
          介绍视频:
          <VideoUpload
            preVideo={this.state?.introduceVideo}
            handleVideoChange={(url: any) => {
              this.setState({introduceVideo: url === null ? "" : url})
            }}
          />
        </Form.Item>
        <Form.Item>
          教学视频:
          <VideoUpload
            preVideo={this.state?.guideVideo}
            handleVideoChange={(url: any) => this.setState({guideVideo: url === null ? "" : url})}
          />
        </Form.Item>
        <Collapse destroyInactivePanel accordion>
          <CollapsePanel key="0" header="实验文档">
            {this.state.editorData ? <VRLessonDocument lessonId={this.state.editorData.id}></VRLessonDocument> : null}
          </CollapsePanel>
          <CollapsePanel key="1" header="实验描述">
            <Form.Item name="description">
              <RichTextEditor
                ContentInitialValue={this.state.description}
                OnContentChanged={(description) => this.setState({description})}
              />
            </Form.Item>
          </CollapsePanel>
          <CollapsePanel key="2" header="实验指南">
            <Form.Item name="expGuide">
              <RichTextEditor
                ContentInitialValue={this.state.editorExpGuide}
                OnContentChanged={(editorExpGuide) => this.setState({editorExpGuide})}
              />
            </Form.Item>
          </CollapsePanel>
          <CollapsePanel key="3" header="实验原理">
            <Form.Item name="principle">
              <RichTextEditor
                ContentInitialValue={this.state.editorPrinciple}
                OnContentChanged={(editorPrinciple) => this.setState({editorPrinciple})}
              />
            </Form.Item>
          </CollapsePanel>
          <CollapsePanel key="4" header="服务计划">
            <Form.Item name="servicePlan">
              <RichTextEditor
                ContentInitialValue={this.state.editorServicePlan}
                OnContentChanged={(editorServicePlan) => this.setState({editorServicePlan})}
              />
            </Form.Item>
          </CollapsePanel>
          <CollapsePanel key="5" header="设备要求">
            <Form.Item name="deviceRequire">
              <RichTextEditor
                ContentInitialValue={this.state.editorDeviceRequire}
                OnContentChanged={(editorDeviceRequire) => this.setState({editorDeviceRequire})}
              />
            </Form.Item>
          </CollapsePanel>
          <CollapsePanel key="6" header="实验特色">
            <Form.Item name="expFeature">
              <RichTextEditor
                ContentInitialValue={this.state.editorExpFeature}
                OnContentChanged={(expFeature) => this.setState({editorExpFeature: expFeature})}
              />
            </Form.Item>
          </CollapsePanel>
          <CollapsePanel key="7" header={"ilab-x配置"}>
            <this.RenderIlabForm/>
          </CollapsePanel>
        </Collapse>

        <Form.Item style={{float: 'right'}}>
          <Space>
            <Button onClick={() => this.props.history.goBack()}>取消</Button>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Space>
        </Form.Item>
      </Form>
    );
  }
}

export default connect()(VRCourseEditor);
